<template>
  <div class="order_abnormal_replenish">
    <el-form  ref="replenishForm" :model="replenishForm" :rules="replenishRule"  label-width="120px">
      <el-form-item label="后台单号" prop="xmbzNo">
        <el-input v-model="replenishForm.xmbzNo" class="inputType" disabled size="small" style="width:350px"></el-input>
      </el-form-item>
      <el-form-item label="补单原因" prop="replacementReason">
        <el-select v-model="replenishForm.replacementReason" placeholder="补单原因" size="small" style="width:350px">
          <el-option :label="item.dictValue" :value="item.dictKey"
                     v-for="(item,index) in replacementReasonList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="责任部门" prop="liableDept">
        <el-select v-model="replenishForm.liableDept" placeholder="责任部门" size="small" style="width:350px">
          <el-option :label="item.dictValue" :value="item.dictKey"
                     v-for="(item,index) in responsibleDepartmentList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门失误类型">
        <XmCascader size="small" clearable v-model="exceptionEditing" :options="options" separator=">" :props="{multiple: true, checkStrictly: true}" placeholder="请选择部门失误类型" style="width: 350px;"></XmCascader>
      </el-form-item>
      <el-form-item label="责任人" prop="liablePerson">
        <el-input v-model="replenishForm.liablePerson" class="inputType" placeholder="责任人" size="small"
                  style="width:350px"></el-input>
      </el-form-item>
      <el-form-item label="是否生产" prop="isProduced">
        <el-select v-model="replenishForm.isProduced" placeholder="是否生产" size="small" style="width:350px">
          <el-option :label="item.dictValue" :value="item.dictKey"
                     v-for="(item,index) in isProductionList" :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="display: flex;justify-content: flex-end">
        <el-button type="primary" size="big" style="width:100px" @click="replenishSubmitForm($event,'replenishForm')">确定
        </el-button>
        <el-button size="big" @click="replenishResetForm('replenishForm')" style="width:100px">取消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>

import {
  getReplacementReasonDict,
  getReplacementResponsibleDepartmentDict,
  getCakeWhereaboutsDict,
  getIsProductionDict,
  submitAnomalyReplacementOrder,
  getResponsibleDepartmentErrorTree
} from "@/api/orderReplenish";

export default {
  props: ['replenishObject'],
  mounted() {
    this.deptId = this.replenishObject.replenishDeptId;
    this.replenishForm.xmbzNo = this.replenishObject.replenishXmbzNo;
    this.deptName = this.replenishObject.replenishDeptName;
    this.id = this.replenishObject.replenishId;
    // 初始化补单原因
    getReplacementReasonDict().then(res => {
      if (res.data.code === 200) {
        this.replacementReasonList = res.data.data;
      }
    }).catch(error => {
      console.log(error)
    })
    // 初始化责任部门
    getReplacementResponsibleDepartmentDict().then(res => {
      if (res.data.code === 200) {
        this.responsibleDepartmentList = res.data.data;
      }
    }).catch(error => {
      console.log(error)
    })
    // 初始化是否生产
    getIsProductionDict().then(res => {
      if (res.data.code === 200) {
        this.isProductionList = res.data.data;
      }
    }).catch(error => {
      console.log(error)
    })

    getResponsibleDepartmentErrorTree().then(res => {
      this.options = res.data
      this.options.map((item, idnex) => {
          // item.disabled = false;
          item.children.map((items, index) => {
            items.label = `${item.label}-${items.label}`
            items.value = `${item.value}:${items.value}`
          })
      })
    })
  },
  data() {
    return {
      replacementReasonList: [],
      responsibleDepartmentList: [],
      deptErrorTypeList: [],
      isProductionList: [],
      options: [],
      deptId: "",
      exceptionEditing: [],
      deptName: "",
      id: "",
      configTips: null,
      replenishForm: {
        xmbzNo: "", // 熊猫系统编码
        replacementReason: '', // 补单原因
        liableDept: '', // 责任部门
        liablePerson: '', // 责任人
        isProduced: 2, // 是否生产
        deptErrorType: '', // 部门失误类型
      },
      replenishRule: {
        xmbzNo: [{
          required: true,
          message: "订单编码不能为空",
          trigger: "blur"
        }],
        replacementReason: [{
          required: true,
          message: "请选择补单原因",
          trigger: "change"
        }],
        liableDept: [{
          required: true,
          message: "请选择责任部门",
          trigger: "change"
        }],
        liablePerson: [{
          required: true,
          message: "请填写责任人",
          trigger: "blur"
        }],
        isProduced: [{
          required: true,
          message: "请选择是否生产",
          trigger: "change"
        }]
      },
    }
  },
  methods: {
    replenishResetForm(formName) {
      this.$refs[formName].resetFields();
      this.replenishForm.xmbzNo = "",
      this.replenishForm.replacementReason = "",
      this.replenishForm.liableDept = "",
      this.replenishForm.liablePerson = "",
      this.replenishForm.isProduced = "",
      this.replenishForm.deptErrorType = "",
      this.exceptionEditing = ""
      this.$emit("replenishClose");
    },
    replenishSubmitForm(e, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.exceptionEditing === ""){
            this.$message({
              type: "warning",
              message: "部门失误类型不能为空"
            })
            return false
          }
          const replenishData = {
            xmbzNo: this.replenishForm.xmbzNo,
            replacementReason: this.replenishForm.replacementReason,
            liableDept: this.replenishForm.liableDept,
            liablePerson: this.replenishForm.liablePerson,
            isProduced: this.replenishForm.isProduced,
            deptErrorType: this.exceptionEditing.map(item => item[item.length - 1]).join(',') || null
          }
          submitAnomalyReplacementOrder(replenishData).then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs[formName].resetFields();
            this.replenishForm.xmbzNo = "",
            this.replenishForm.replacementReason = "",
            this.replenishForm.liableDept = "",
            this.replenishForm.liablePerson = "",
            this.replenishForm.isProduced = "",
            this.replenishForm.deptErrorType = "",
              this.exceptionEditing = ""
            setTimeout(() => {
              this.$emit("replenishClose");
            }, 1000);
            let preUrl = this.$router.resolve({
              path: "/replenishCopyOrder",
              query: {
                id: this.id,
                xmbzNo: this.replenishForm.xmbzNo,
                cityId: this.deptId,
                deptName: this.deptName,
                pageType: 'replenishCopy'
              }
            });
            window.open(preUrl.href, "_blank");

          }).catch(err => {
            this.$refs[formName].resetFields();
          })
        } else {
          this.$message.error("信息未填完整!");
          return false
        }
      })
    }
  }
}
</script>

<style lang="css">
.order_abnormal_replenish {
  margin-left: 80px;
}

</style>
